<template>
	<div class="tag-nav">
		<div class="buttons">
        	<Icon type="ios-arrow-back" @click="onScrollLeft" />
        </div>
		<Content ref="content" @mousewheel.native="onMousewheel">
			<template v-for="(item, index) in items">
			<Tag ref="tags" type="dot" 
				:key="item.id"
				:closable="item.closable != false"  
				:color="index == value ? 'primary': ''" 
				@on-close="onTabClose(item, index)" 
				@click.native="onTabClicked(item, index)">{{item.name}}</Tag>
			</template>
		</Content>
		<div class="buttons after">
        	<Icon type="ios-arrow-forward" @click="onScrollRight" />
        	<Dropdown placement="bottom" @on-click="onCloseTabClick">
        		<Icon type="ios-close-circle-outline" />
        		<DropdownMenu slot="list">
        			<DropdownItem name="current">{{textCloseCurrent || text.close.current}}</DropdownItem>
        			<DropdownItem name="all">{{textCloseAll || text.close.all}}</DropdownItem>
        		</DropdownMenu>
	        </Dropdown>
        </div>
	</div>
</template>
<script type="text/javascript">
import {Content, Icon, Tag, Dropdown, DropdownMenu, DropdownItem} from 'view-design';
export const CLEAR_ALL = "all";
export const CLEAR_CURRENT = "current";
export default {
	props: {
		items: Array,
		value: Number,
		textCloseAll: String,
		textCloseCurrent: String
	},
	data() {
		return {
			text: {
				close: {
					all: "关闭所有",
					current: "关闭当前"
				}
			}
		};
	},
	methods: {
		onScrollLeft() {
			var container = this.$refs.content.$el;
			var left = container.scrollLeft - 10;
			container.scrollLeft = left < 0 ? 0 : left;
		},
		onScrollRight() {
			var container = this.$refs.content.$el;
			var left = container.scrollLeft + 10;
			container.scrollLeft = left;
		},
		scrollToIndex(index) {
			if(index > -1 && this.$refs.tags && this.$refs.tags.length > 0) {
				var container = this.$refs.content.$el;
				var tag = this.$refs.tags[index].$el;
				var width = container.clientWidth;
				var x = container.scrollLeft;
				var left = tag.offsetLeft - x;
				var tagWidth = tag.clientWidth;
				if(left + tagWidth > width) {
					x += left + tagWidth - width + 5;
				}
				if(left < 0) {
					x += left - 5;
				}
				container.scrollLeft = x;
			}
		},
		onMousewheel(e) {
			var container = this.$refs.content.$el;
			var left = container.scrollLeft + (e.deltaY > 0 ? 10 : -10);
			container.scrollLeft = left < 0 ? 0 : left;
		},
		onTabClose(item, index) {
			var remove = true;
			var me = this;
			var e = {
				item, 
				index,
				prevent() {
					remove = false;
				},
				remove() {
					me.items.splice(index, 1);
					var selectedIndex = 0;
					if(me.value > index) {
						selectedIndex = me.value - 1;
					} else {
						selectedIndex = me.items.length > 0 ? (index > 0 ? index - 1 : 0) : -1;
					}
					me.onTabClicked(me.items[selectedIndex], selectedIndex);
				}
			};
			this.$emit("tabClose", e);
			if(remove) {
				e.remove();
			}
		},
		onTabClicked(item, index) {
			if(this.value != index) {
				this.$emit('input', index);
				this.$emit("tabSeleted", item, index);
			}
		},
		onCloseTabClick(name) {
			var me = this;
			var remove = true;
			var e = {
				name: name,
				prevent() {
					remove = false;
				},
				remove() {
					if(name == CLEAR_CURRENT) {
						if(me.value > -1 && me.items.length > 0) {
							me.items.splice(me.value, 1);
							var selectedIndex = me.items.length > 0 ? (me.value > 0 ? me.value - 1 : 0) : -1;
							me.onTabClicked(me.items[selectedIndex], selectedIndex);
						}
					} else if(name == CLEAR_ALL) {
						me.items.splice(0, me.items.length);
						me.$emit('input', -1);
					}
				}
			}
			this.$emit("tabsClose", e);
			if(remove) {
				e.remove();
			}
		}
	},
	watch: {
		value(val) {
			
			this.$nextTick(() => {
				this.scrollToIndex(val);
			});
			
		}
	},
	components: {
		Content,
		Icon,
		Tag,
		Dropdown,
		DropdownMenu,
		DropdownItem
	}

}
</script>
<style type="text/css">
.tag-nav {
	flex-direction: row;
	display: -webkit-flex; 
	display: flex;
    background: #f0f0f0;
    height: 38px;
    min-height: 38px;
    overflow: hidden;
    padding: 0;
}

.tag-nav > div.ivu-layout-content {
    background: transparent;
    padding-top: 1px;
    padding-left: 4px;
    overflow: hidden;
    height: 38px;
    white-space: nowrap;
}

.tag-nav > div.buttons {
    background-color: #fff;
    font-size: 18px;
    line-height: 18px;
    padding:8px 5px;
    height: 38px;
    border-top:1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.tag-nav > div.after {
	min-width: 52px;
}

.tag-nav > div.buttons i,
.tag-nav .ivu-tag {
    cursor: pointer;
}
</style>